import Vue from 'vue'
import Vuex from 'vuex'

import axios from 'axios'
// 1.安装持久化存储 vuex 中数据的第三方包 yarn add vuex-persistedstate@3.2.1
// 2.导入包
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)
export default new Vuex.Store({
 // 3. 配置为 vuex 的插件  会优先拿本地存储的数据 
  plugins: [createPersistedState()],
  state: {  
    //用来存储登录成功之后 得到的token  
    token:'',
    //方法2: 拿到本地存储的数据 
    // token: localStorage.getItem('token')|| ''
    //定义 空对象 接收数据
    userInfo:{}
  },
  getters: {},
  mutations: {
    //2.更新token 的mutations函数
    updateToken(state, newToken) {
      state.token = newToken    //修改token值
    },
      //修改用户数据   
    updateUserInfo(state,payload){
       state.userInfo= payload
    }
  },
  actions: {
     //发送axios  引入axios  渲染页面
       async initUserInfo(context){
        console.log(context);
      const {data:res} = await axios.get('/my/userinfo')
        // {
        // headers:{  //通过请求头 传递token
        //   Authorization:context.state.token
        // }
        //  }
       //通过 mutations 修改 state 数据 ,传参请求数据
       if(res.code==0){
        context.commit('updateUserInfo',res.data)
       }
     } 
  },
  modules: {}
})
